﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>空运</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4-4/s4-4-bg.jpg');
            background-repeat: no-repeat;
        }

        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }
    </style>
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/coolvis/cvis.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode/jzcode.event.js"></script>
</head>
<body>
    <canvas id="canvas2" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position:absolute;top:0px; left:0px; width:1920px; height:1080px"></div>
    <script src="./content/s4-4-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script>
        var g_tagLink01 = 1001;

        function randomValue() {
            return '1' + parseInt((1000 + Math.random() * 6481));
        }
        function StepNode(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oBtn1 = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-4/step-footer.png', pos: [112, 100] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-4/s4-4-stepn.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-4/s4-4-steph.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [112, 80] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                this.oNumber = new cvisLabel({ text: '16481', fontSize: 32, color: '#e60013', pos: [112, 45] });
                this.oNumber.setPivot([0.5, 0.5]);
                this.addNode(this.oNumber);
                this.addNode(new Light());

                this.oBtn1 = new cvisToggleButton({ tex2d: 'images/s4-3/btn0N.png', tex2dSel: 'images/s4-3/btn0H.png', pos: [30, 50] });
                this.addNode(this.oBtn1);
                this.oBtn1.on('click', function () {
                    if (s4_3.step0.oBtn1.isChecked) {
                        showChart0();
                    } else {
                        hideChart0();
                    }
                });

                this.active(true);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                }
            }
        }
        function StepNode1(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.oArrow = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-4/step-footer.png', pos: [112, 100] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-4/s4-4-stepn.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-4/s4-4-steph.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [112, 40] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                //this.oNumber = new cvisLabel({ text: '13528', fontSize: 42, color: '#e60013', pos: [210, 105] });
                //this.oNumber.setPivot([0.5, 0.5]);
                //this.addNode(this.oNumber);

                this.oLink = new cvisNode({ tex2d: 'images/s4-3/link0-1.png', pos: [-210, -10] });
                this.addNode(this.oLink);
                this.oArrow = new cvisNode({ tex2d: 'images/s4-3/arrow.png', pos: [-70, 130] });
                this.addNode(this.oArrow);

                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                    this.oArrow.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                    this.oArrow.isVisible = false;
                }
            }
        }
        function StepNode2(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.onInit = function () {
                //var footer = new cvisNode({ tex2d: 'images/s4-3/step-footer.png', pos: [210, 200] });
                //footer.setPivot([0.5, 0]);
                //this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-4/s4-4-stepn.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-4/s4-4-steph.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [112, 40] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                //this.oNumber = new cvisLabel({ text: '6268', fontSize: 42, color: '#e60013', pos: [210, 105] });
                //this.oNumber.setPivot([0.5, 0.5]);
                //this.addNode(this.oNumber);

                this.oLink = new cvisNode({ tex2d: 'images/s4-3/link1-2.png', pos: [-137, 3] });
                this.addNode(this.oLink);
                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                }
            }
        }
        function StepNode3(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-4/step-footer.png', pos: [112, 100] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-4/s4-4-stepn.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-4/s4-4-steph.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [112, 40] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                //this.oNumber = new cvisLabel({ text: '14621', fontSize: 42, color: '#e60013', pos: [210, 105] });
                //this.oNumber.setPivot([0.5, 0.5]);
                //this.addNode(this.oNumber);

                this.oLink = new cvisNode({ tex2d: 'images/s4-3/link2-3.png', pos: [-52, -210] });
                this.addNode(this.oLink);
                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                }
            }
        }
        function Light() {
            cvisNode.call(this, []);
            this.onInit = function () {
                for (var index = 0; index < 8; index++) {
                    var light = new cvisNode({ tex2d: 'images/s4-4/light' + index + '.png', pos: [112, 102] });
                    light.setPivot([0.5, 0.5]);
                    this.addNode(light);
                }

                this.addAnimation(new cvisForever(new cvisSequence([new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 0) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 1) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 2) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 3) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 4) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 5) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 6) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 7) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this)])));
            }
        }

        function Chart0() {
            cvisNode.call(this, []);
            this.bg = null;
            this.oBtn1 = null;
            this.onInit = function () {

                this.oBtn1 = new cvisToggleButton({ tex2d: 'images/s4-3/btnClose.png', tex2dSel: 'images/s4-3/btnClose.png', pos: [572, 0] });
                this.addNode(this.oBtn1);
                this.oBtn1.on('click', function () {
                    hideChart0();
                });

                this.isVisible = false;
            }
        }

        var g_leftArr = [];
        var g_leftArrIndex = 0;
        var s4_3 = {
            step0: new StepNode('images/s4-4/step0-title.png'),
            step1: new StepNode1('images/s4-4/step1-title.png'),
            step2: new StepNode2('images/s4-4/step2-title.png'),
            step3: new StepNode3('images/s4-4/step3-title.png'),
            chart0: new Chart0(),
            init: function () {
                this.step0.setPos([485, 828]);
                this.step1.setPos([730, 828]);
                this.step2.setPos([880, 711]);
                this.step3.setPos([1035, 828]);
                this.chart0.setPos([1250, 671]);
            },
            showStep: function () {
                this.step0.isVisible = true;
                this.step1.isVisible = true;
                this.step2.isVisible = true;
                this.step3.isVisible = true;
            },
            hideStep: function () {
                this.step0.isVisible = false;
                this.step1.isVisible = false;
                this.step2.isVisible = false;
                this.step3.isVisible = false;
            },
            convertLinkData: function (fullData) {
                var data = fullData.links;
                var geoCoordMap = fullData.coordMap;
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },
            convertLinkCityData: function (fullData) {
                var data = fullData.links;
                var geoCoordMap = fullData.coordMap;
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (toCoord) {
                        var isInsert = false;
                        for (var ires = 0; ires < res.length; ires++) {
                            if (res[ires].name == dataItem[1].name) {
                                isInsert = true;
                                res[ires].value[2] += dataItem[1].value;
                                break;
                            }
                        }
                        if (isInsert == false) {
                            res.push({
                                name: dataItem[1].name,
                                value: [toCoord[0], toCoord[1], dataItem[1].value]
                            });
                        }
                    }
                }
                //for (var ires = 0; ires < res.length; ires++) {
                //    console.log(res[ires].name+':'+res[ires].value[2]);
                //}
                return res;
            },

            seriesHBRL: {
                name: 'hbrl',
                type: 'map',
                geoIndex: 2,
                left: 500,
                top: 50,
                bottom: 380,
                right: 100,
                roam: false,
                data: []
            },
            seriesHBRLCity: {
                name: 'hbrl-city',
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 2,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        textStyle: {
                            color: '#f00',
                            fontSize: 12
                        }
                    }
                },
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#f00'
                    }
                },
                data: []
            },
            seriesGNELLC: {
                name: 'gnwllc-bg',
                type: 'map',
                //geoIndex: 0,
                mapType: 'china',
                left: 1290,
                top: 700,
                bottom: 60,
                right: 150,
                roam: false,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#555577',
                            fontSize: 20
                        },
                        formatter: function (value, index) {
                            return value.name;
                        }
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(255, 255, 255, 0)',
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                },
                data: []
            },
            seriesLinkCity: {
                name: 'linkCity',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                geoIndex:1,
                rippleEffect: {
                    brushType: 'stroke',
                    scale: 5.0
                },
                label: {
                    normal: {
                        show: false,
                        formatter: '{b}',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 12
                        }
                    }
                },
                symbolSize: function (val) {
                    var lSize = val[2] / 110000;
                    if (lSize < 3) {
                        lSize = 3;
                    }
                    return lSize;
                },
                itemStyle: {
                    normal: {
                        color: '#f00'
                    }
                },
                data: [],
            },
            seriesLink: {
                name: 'project',
                type: 'lines',
                geoIndex:1,
                symbol: ['circle', 'circle'],
                symbolSize: 8,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'circle',
                    symbolSize: 3,
                    color: '#fff'
                },
                lineStyle: {
                    normal: {
                        color: '#ff0',
                        width: 2,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                }
            },
            seriesChart0: {
                name: 'chartInst0',
                type: 'line',
                stack: '总量',
                z: 301,
                lineStyle: {
                    normal: {
                        color: 'rgb(255,240,0)',
                        width: 2,
                        type: 'solid'
                    }
                },
                areaStyle: {
                    normal: {

                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: 'rgba(253,170,4,1)' // 0% 处的颜色
                        }, {
                            offset: 0.7, color: 'rgba(253,170,4, 0.6)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0, 0, 0, 0.01)' // 100% 处的颜色
                        }], false)
                    }
                },
                data: []
            }
        };


        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        var g_provinceCount = null;


        function convertProvinceCountData() {
            var lData = [];
            for (var index = 0; index < g_provinceCount.names.length; index++) {
                lData.push({ name: g_provinceCount.names[index], value: g_provinceCount.values[index] });
            }
            return lData;
        }
        var g_s4_3gnwllcJson = null;
        $(document).ready(function () {
            cvis.addNode(new cvisNode({ tex2d: 'images/s4-4/step-bg.png', pos: [489, 695] }));
            cvis.addNode(s4_3.step0);
            cvis.addNode(s4_3.step1);
            cvis.addNode(s4_3.step2);
            cvis.addNode(s4_3.step3);
            cvis.addNode(s4_3.chart0);
            s4_3.init();

            for (var index = 0; index < 4; index++) {
                g_leftArr.push(new cvisNode({ tex2d: 'images/s4-3/left' + index + '.png', pos: [48, 130] }));
                cvis.addNode(g_leftArr[index]);
                g_leftArr[index].isVisible = false;
            }
            g_leftArr[0].isVisible = true;
            cvis.addAnimation(new cvisForever(new cvisSequence([new cvisWait(5000), new cvisFunc(function () {
                g_leftArrIndex++;
                if (g_leftArrIndex > 3) {
                    g_leftArrIndex = 0;
                }
                for (var index = 0; index < 4; index++) {
                    g_leftArr[index].isVisible = false;
                }
                g_leftArr[g_leftArrIndex].isVisible = true;
            }, null)])));
            cvis.start({ canvas: document.getElementById('canvas2'), size: { w: 1920, h: 1080 }, interval: 30 });
            //register();

            var g_s4_4mapcity = null;
            $.get(jzcode.data.getUrl('./data/s4-4-map.json'), function (s4_3hbrlJson) {
                $.get(jzcode.data.getUrl('./data/s4-4-map-city.json'), function (s4_4mapcity) {
                    $.get(jzcode.data.getUrl('./data/s4-3-gnwllc.json'), function (s4_3gnwllcJson) {
                        g_provinceCount = s4_3hbrlJson;
                        g_s4_3gnwllcJson = s4_3gnwllcJson;
                        g_s4_4mapcity = s4_4mapcity;
                        option = {
                            title: {
                                text: '',
                                subtext: '',
                                sublink: '#',
                                left: 'center',
                                top: 5,
                                itemGap: 0,
                                textStyle: {
                                    color: '#577ceb'
                                }
                            },
                            brush: {
                                geoIndex: 0,
                                brushLink: 'all',
                                inBrush: {
                                    opacity: 1
                                },
                                outOfBrush: {
                                    color: '#b99e2a',
                                    symbolSize: 4,
                                    opacity: 0.1
                                }
                            },
                            graphic: {
                                elements: [{
                                    id: 'title-hbrl',
                                    type: 'image',
                                    left: 500,
                                    top: 60,
                                    style: {
                                        image: './images/s4-4/s4-4-maptitle.png'
                                    },
                                    z: 3
                                }, {
                                    id: 'title-gnwllc',
                                    type: 'image',
                                    left: 1238,
                                    top: 695,
                                    style: {
                                        image: './images/s4-4/s4-4-linktitle.png'
                                    },
                                    z: 3
                                }, {
                                    id: 'map-legend',
                                    type: 'image',
                                    left: 500,
                                    top: 395,
                                    style: {
                                        image: './images/s4-4/s4-4-maplegend.png'
                                    },
                                    z: 3
                                }]
                            },
                            grid: {
                                show: true,
                                left: 1270,
                                right: 80,
                                top: 790,
                                bottom: 110,
                                borderWidth: 0,
                                containLabel: false,
                                z: 400
                            },
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    interval: 0,
                                    rotate: -45,
                                    textStyle: {
                                        color: '#FFF'
                                    }
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: true
                                }, splitLine: {
                                    show: true,
                                    interval: 0
                                },
                                z: 400
                            }],
                            yAxis: [
                                {
                                    type: 'value',
                                    axisLabel: {
                                        show: false
                                    },
                                    axisLine: {
                                        show: false
                                    }, splitLine: {
                                        show: true,
                                        interval: 0
                                    },
                                    z: 400
                                }
                            ],
                            geo: [{
                                map: 'world',
                                left: 505,
                                top: 55,
                                bottom: 375,
                                right: 100,
                                roam: false,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#000',
                                        borderColor: '#000',
                                        borderWidth: 1
                                    }
                                }
                            }, {
                                map: 'china',
                                silent: true,
                                label: {
                                    emphasis: {
                                        show: false,
                                        areaColor: '#eee'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        areaColor: 'rgba(255, 255, 255, 0)',
                                        borderColor: '#fff',
                                        borderWidth: 1,
                                        color: '#fff',
                                        shadowColor: '#fff',
                                        shadowBlur: 5
                                    }
                                },
                                left: 1290,
                                top: 700,
                                right: 150,
                                bottom: 60,
                                roam: false
                            }, {
                                map: 'world',
                                left: 500,
                                top: 50,
                                bottom: 380,
                                right: 100,
                                roam: false,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#fff',
                                        borderColor: '#222222',
                                        borderWidth: 1
                                    }
                                },
                                regions: [{
                                    name: 'China',
                                    itemStyle: {
                                        normal: {
                                            areaColor: '#f8ffa8',
                                            color: 'red'
                                        }
                                    }
                                }]
                            }],
                            visualMap: [{
                                show: false,
                                type: 'piecewise',
                                pieces: [
                                    { min: 5000 }, // 不指定 max，表示 max 为无限大（Infinity）。
                                    { min: 3000, max: 5000 },
                                    { min: 1000, max: 3000 },
                                    { min: 300, max: 1000 },
                                    { min: 0.0000000001, max: 300 }
                                ],
                                left: 'left',
                                top: 'bottom',
                                text: ['高', '低'],           // 文本，默认为数值文本
                                calculable: true,
                                orient: 'horizontal',
                                itemWidth: 15,
                                itemHeight: 110,
                                seriesIndex: 0,
                                inRange: {
                                    color: ['#00c0ff', '#40e100', '#fff100', '#ff7200', '#ff0000']
                                },
                                outOfRange: {
                                    color: ['#00c0ff']
                                },
                                left: 500,
                                top: 940,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                            //, {
                            //    min: 0,
                            //    max: 9999999,
                            //    range: [0, 9999999],
                            //    left: 'left',
                            //    top: 'bottom',
                            //    text: ['高', '低'],           // 文本，默认为数值文本
                            //    calculable: true,
                            //    orient: 'horizontal',
                            //    itemWidth: 15,
                            //    itemHeight: 110,
                            //    show: true,
                            //    seriesIndex: 1,
                            //    inRange: {
                            //        color: ['#fffbc7', '#fbff88', '#f6fb00', '#ff6e02', '#ff6e02']
                            //    },
                            //    outRange: {
                            //        color: ['white']
                            //    },
                            //    left: 500,
                            //    top: 940,
                            //    textStyle: {
                            //        color: '#fff'
                            //    }
                            //}
                            ],
                            series: [s4_3.seriesHBRL, s4_3.seriesHBRLCity, s4_3.seriesGNELLC, s4_3.seriesLink, s4_3.seriesLinkCity, s4_3.seriesChart0]
                        };

                        s4_3.seriesHBRL.data = convertProvinceCountData();
                        for (var mcIndex = 0; mcIndex < g_s4_4mapcity.length; mcIndex++) {
                            if (g_s4_4mapcity[mcIndex].name == '北京') {
                                g_s4_4mapcity[mcIndex].symbol = 'image://images/s4-4/icon-star.png';
                                g_s4_4mapcity[mcIndex].symbolSize = [12, 12];
                            } else {
                                g_s4_4mapcity[mcIndex].symbol = 'image://images/s4-4/icon-flag.png';
                                g_s4_4mapcity[mcIndex].symbolSize = [18, 20];
                                g_s4_4mapcity[mcIndex].symbolOffset = [0, 0];
                            }
                        }
                        s4_3.seriesHBRLCity.data = g_s4_4mapcity;
                        s4_3.seriesLink.data = s4_3.convertLinkData(g_s4_3gnwllcJson);
                        s4_3.seriesLinkCity.data = s4_3.convertLinkCityData(g_s4_3gnwllcJson);
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                    }, 'json');
                }, 'json');
            }, 'json');

            myChart.on('click', function (params) {
                if (params.seriesName == 'hbrl') {
                    if (s4_3.seriesHBRL.top == 190) {
                        zoomInHBRL();
                    } else {
                        zoomOutHBRL();
                    }
                } else {
                    if (s4_3.seriesGNELLC.top == 140) {
                        zoomInGNELLC();
                    } else {
                        zoomOutGNELLC();
                    }
                }
            });
        });
        register();
    </script>
</body>
</html>